<!--
 * @Author: wupeiwen <javapeiwen2010@gmail.com>
 * @Date: 2022-04-20 16:10:24
 * @LastEditors: wupeiwen <javapeiwen2010@gmail.com>
 * @LastEditTime: 2023-06-13 11:17:19
 * @FilePath: /tea-garden-web/src/pages/overview/farmland-search.vue
 * @Description: 组件-地块搜索
-->
<template>
  <section class="component-farmland-search">
    <div class="content">
      <i class="icon-button-back" @click="$router.push({ name: 'baseOverview' })" />
      <!-- <span class="base-name">{{ baseInfo.base_name }}</span> -->
      <span class="base-name">地块管理</span>
      <div class="search-result">
        <div class="search-input">
          <input
            type="text"
            class="input"
            placeholder="按种植品种搜索"
            clearable
            :value="query"
            @input="setQuery"
          />
        </div>
        <span class="title">搜索结果</span>
        <el-skeleton animated :loading="loading.filterFarmland">
          <template #template>
            <div class="list">
              <el-skeleton-item
                v-for="(item, index) in 3"
                :key="index"
                variant="rect"
                style="height: 100px; background: #f2f2f2; border-radius: 5px"
              />
            </div>
          </template>
          <template #default v-if="filterFarmland.length > 0">
            <div class="list">
              <div
                class="farmland"
                v-for="(item, index) in filterFarmland"
                :key="index"
                @click="handleClickFarmland(item.id)"
              >
                <section class="code">
                  <span class="color-1 mr14">地块编号:</span>
                  <span class="color-1">{{ item.massifNum }}</span>
                </section>
                <section class="type">
                  <span class="color-2 mr14">品种:</span>
                  <span class="color-3">
                    {{ getDictItemNameById(item.breed) }}
                  </span>
                </section>
                <section class="area">
                  <span class="color-2 mr14">面积:</span>
                  <span class="color-2">{{ item.massifArea }}亩</span>
                </section>
              </div>
            </div>
          </template>
          <template #default v-else>
            <div class="list">
              <no-data style="margin: 60px auto 0 auto" :width="140.5" :height="154" />
            </div>
          </template>
        </el-skeleton>
      </div>
    </div>
  </section>
</template>

<script>
import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
export default {
  data () {
    return {
      timer: null
    }
  },
  computed: {
    ...mapState('base-overview', ['query', 'loading', 'filterFarmland']),
    ...mapGetters('common', ['getDictItemNameById'])
  },
  watch: {
    query () {
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.filterFarmlandByType()
      }, 1000)
    }
  },
  methods: {
    ...mapMutations('base-overview', ['setFarmlandId', 'setQuery']),
    ...mapActions('base-overview', ['filterFarmlandByType']),
    // 触发调整事件
    handleClickFarmland (farmlandId) {
      this.setFarmlandId(farmlandId)
      this.$router.push({ name: 'farmlandDetail' })
    }
  },
  created () {
    this.filterFarmlandByType()
  }
}
</script>

<style lang="scss">
.component-farmland-search {
  width: 308px;
  height: 780px;
    margin-top: -45px;
  transform: scale(0.89);
  .content {
    position: relative;
    height: 100%;
    .icon-button-back {
      position: absolute;
      left: 16px;
      top: 18.5px;
      width: 22.5px;
      height: 22.5px;
      background-image: url("/public/image/common/icon-button-back-02.png");
      background-size: cover;
      cursor: pointer;
    }
    .base-name {
      position: absolute;
      left: 25%;
      right: 25%;
      top: 17px;
      text-align: center;
      font-size: 18px;
      font-family: PingFang SC-Heavy, PingFang SC;
      font-weight: 800;
      color: #ffffff;
    }
    .search-result {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 719px;
      background: #ffffff;
      box-shadow: 1px 0px 4px 1px rgba(0, 0, 0, 0.25);
      border-radius: 15px;
      padding: 25.5px 15px 16px 20px;
      .search-input {
        margin-bottom: 21px;
        &::before {
          display: inline-block;
          vertical-align: top;
          content: "";
          width: 27.5px;
          height: 27.5px;
          background-image: url("/public/image/common/icon-button-search.png");
          background-size: cover;
          margin-right: 8.5px;
        }
        .input {
          border-top: 0;
          border-right: 0;
          border-bottom: 1px solid #9cd7dd;
          border-left: 0;
          width: 219px;
          height: 27.5px;
          font-size: 14px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #9cd7dd;
          line-height: 27.5px;
        }
        ::-webkit-input-placeholder {
          color: #9cd7dd;
          font-size: 14px;
        }
      }
      .title {
        display: block;
        margin-top: 25px;
        margin-bottom: 6px;
        font-size: 16px;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #333333;
      }
      .list {
        height: 596px;
        overflow-y: auto;
        .farmland {
          margin: 0 auto;
          width: 258px;
          height: 100px;
          border-radius: 5px;
          box-shadow: 0px 2px 10px 0.5px rgba(0, 0, 0, 0.1);
          background-image: url("/public/image/base-overview/bg-farmland.png");
          background-size: cover;
          margin-bottom: 15px;
          &:last-of-type {
            margin-bottom: 10px;
          }
          position: relative;
          font-size: 14px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          @mixin color-margin {
            .color-1 {
              color: #333333;
            }
            .color-2 {
              color: #979797;
            }
            .color-3 {
              color: #089bab;
            }
            .mr14 {
              margin-right: 14px;
            }
          }
          .code {
            position: absolute;
            left: 12px;
            top: 13.5px;
            @include color-margin;
          }
          .type {
            position: absolute;
            left: 12px;
            top: 39.5px;
            @include color-margin;
          }
          .area {
            position: absolute;
            left: 12px;
            top: 65.5px;
            @include color-margin;
          }
        }
      }
    }
  }
}
</style>
